<div class="well well-sm" style="border-radius: 0">
    <div class="row upload" ng-cloak>
            <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 section-box">
                <div class="import-head" ng-click="showDetails=!showDetails">
                    <div class="import-title light-bold">
                        {{ upload.name || "[multiple files]" }}
                        <span class="pull-right"><i ng-show="'{{upload.all_layers_imported}}' === 'True'" class="fa fa-check pull-right" style="color:#3D9970;"></i></span>
                    </div>
                    <div class="section-box-subtitle">
                        <div class="user-data-metadata">
                                {{upload.date | date:"MMM d yyyy HH:mm:ss"}}
                                <span class="pull-right">{{upload.file_size }}</span>
                            </div>
                    </div>
                </div>
                <div>
                <div>

                        <div class="row" ng-show="showDetails">
                            <div class="col-md-12">
                                <hr style="margin-top: 5px"/>
                                <!--{% if not upload.all_layers_imported %}-->
                                <!--<div class="light-bold">Layers</div>-->

                                <div class="col-xs-10 col-sm-10 col-md-10 col-lg-10 col-xs-offset-1 col-sm-offset-1 col-md-offset-1 col-lg-offset-1 layer-in-upload" ng-repeat="layer in upload.layers">
                                    <div class="layer-upload-name">
                                        <span>{{layer.layer_name || layer.file_name}}</span>
                                        <span ng-show="layer.layer_name && layer.layer_name != layer.file_name"><br>(in {{layer.file_name}})</span>
                                        <span class="pull-right" ng-show="layer.geonode_layer.title"><span style="font-weight: 600">Layer:</span> <a href="{{layer.geonode_layer.url}}" target="_self">{{layer.geonode_layer.title}}</a></span>
                                    </div>
                                    <hr/>
                                    <div class="row">
                                        <div class="layer-upload-details col-md-12">
                                            <div>
                                                <span class="col-md-3 layer-upload-field-name">File Type</span>
                                                <span class="col-md-9">{{layer.file_type || upload.file_type || "UNKNOWN" }}</span>
                                            </div>
                                            <div ng-show="layer.feature_count">
                                                <span class="col-md-3 layer-upload-field-name">Features</span>
                                                <span class="col-md-9">{{layer.feature_count | number : 0}}</span>
                                            </div>
                                            <div>
                                                <span class="col-md-3 layer-upload-field-name">Status</span>
                                                <span class="col-md-9">{{layer.status || "UNKNOWN" }}</span>
                                            </div>
                                        </div>

                                        <div class="layer-upload-field col-md-12">
                                            <div ng-repeat="field in layer.fields">
                                                <span class="col-md-3 layer-upload-field-name">{{field.name}}</span>
                                                <span class="col-md-9">{{field.type}}</span>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-md-12 col-lg-12">
                                        <span class="pull-right" ng-click="open(layer, staticUrl +'osgeo_importer/partials/uploadWizard.html', staticUrl + 'geonode/img/logo.png', staticUrl)" ng-controller="ImportController" style="cursor: pointer;padding-left: 15px; margin-right: -11px">
                                            Create Layer <i class="fa fa-long-arrow-right"></i>
                                        </span>
                                    </div>

                                    <form name="importOptionsForm" class="form-horizontal import-options-form" ng-show="showImportOptions" style="border-top: 1px solid rgb(199, 199, 199);">

                                        <div class="col-md-12 col-lg-12">
                                            <br/>
                                            <div class="form-group">
                                                <label for="layerName" class="col-sm-3 col-xs-3 col-md-3 control-label">Layer Name:</label>
                                                <input id="layerName" type="text" class="col-md-5" ng-model="layer.configuration_options.name" placeholder="{{layer.name}}">
                                            </div>
                                            <div class="form-group">
                                                <label for="configureTime" class="col-sm-3 col-xs-3 col-md-3 control-label">Enable time:</label>
                                                <input id="configureTime" type="checkbox" ng-model="layer.configuration_options.configureTime" checked>
                                            </div>
                                                <div ng-show="layer.configuration_options.configureTime">
                                                        <div class="form-group">
                                                            <label for="start_date" class="col-sm-3 col-xs-3 col-md-3 control-label">Start date:</label>
                                                            <select ng-model="layer.configuration_options.start_date" class="col-md-5 col-xs-5 col-sm-5" id="start_date" ng-required='layer.configuration_options'>
                                                                <option value="" ng-selected="'' == layer.configuration_options.start_date">--Please select a field--</option>
                                                                <option ng-repeat="option in layer.fields" ng-selected="option.name == layer.configuration_options.start_date" value="{{option.name}}">{{option.name}}</option>
                                                            </select>
                                                        </div>
                                                        <div class="form-group">
                                                            <label for="end_date" class="col-sm-3 col-xs-3 col-md-3 control-label">End date:</label>
                                                            <select ng-model="layer.configuration_options.end_date" class="col-md-5 col-xs-5 col-sm-5" id="end_date">
                                                                <option value="" ng-selected="'' == layer.configuration_options.end_date">--Please select a field--</option>
                                                                <option ng-repeat="option in layer.fields" ng-selected="option.name == layer.configuration_options.end_date" value="{{option.name}}">{{option.name}}</option>
                                                            </select>
                                                        </div>
                                                </div>
                                            <div class="form-group">
                                                <label for="editable" class="col-sm-3 control-label">Editable:</label>
                                                <input id="editable" type="checkbox" ng-model="layer.configuration_options.editable" checked>
                                            </div>
                                            <div class="col-xs-offset-2 col-sm-offset-2 col-md-offset-2 col-md-8 col-lg-8" style="padding: 10px; display: table-cell; text-align: center">
                                                <span style="color:#FF4136;" ng-show="hasFailure()">This import has failed.  Adjust configuration above.</span>
                                                <span style="color:#3D9970;" ng-show="successful()">The import has finished successfully. View the <a href="{{layer.geonode_layer.url}}" style="font-weight: 600">Layer</a>.</span>
                                            </div>
                                            <div class="btn btn-sm col-xs-offset-4 col-sm-offset-4 col-md-offset-4 col-md-3 btn-success import-button" ng-click="open(layer, staticUrl + '/osgeo_importer/partials/uploadWizard.html', staticUrl + 'geonode/img/logo.png', staticUrl)" ng-controller="ImportController" ng-class="{'disabled': !isValid()}">&gt;&gt;Import
                                                <i class="fa" ng-class="{'fa-circle-o-notch fa-spin': processing(), 'fa-arrow-circle-right': !processing()}"></i>
                                            </div>

                                     </div>
                                    </form>
                                </div>
                                <!-- {% endif %} -->
                            </div>
                        </div>
                </div>
                <div class="row" ng-show="showDetails">
                    <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 user-data-story-layer-actions">
                        <span class="pull-left" style="cursor: pointer;"><a href="{{upload.file_url}}" target="_self"><i class="fa fa-download"></i> Download</a></span>
                        <span class="clrs-red pull-right" ng-click="deleteLayer(i)" style="cursor: pointer;"><i class="fa fa-trash-o"></i> Delete</span>
                    </div>
                </div>
              </div>
            </div>
        </div>
    </div>
